<template>
	<!-- 表格-->
	<div class="tableBox">
		<div class="tableBox_linear">
			<!-- 个人中心 -->
			<div class="linear-title">
				<!-- <div class="linear-setter">
					<img src="../../asserts/images/img_setting.png"/>
				</div> -->
				个人中心
				<div class="linear-mailbox">
					<img src="../../asserts/images/img_setting.png"/>
				</div>
			</div>
			<div class="linear-info">
				<div class="linear-info-header-img">
					<img src="../../asserts/images/defaultHeader.jpg"/>
				</div>
				<div class="linear-info-header-main">
					<div class="name">
						<span>13260033388</span> 
						<span>&yen; 0</span>
					</div>
					<div class="number-box">
						<div class="number">
							邀请码：mb88675
							<span>复制</span>
						</div>
						<div class="commission">
							账户佣金>
						</div>
					</div>
				</div>
			</div>
			<div class="linear-bg">
				<img src="../../asserts/images/data_image.png"/>
			</div>
			<div class="linear-order-list">
				<ul>
					<li >
						<span>&yen;0</span>
						<p>累计收益</p>
					</li>
					<li >
						<span>&yen;0</span>
						<p>佣金在路上</p>
					</li>
					<li >
						<span>&yen;0</span>
						<p>7日到账</p>
					</li>
				</ul>
			</div>
		</div>


		<!-- 守护 -->
		<div style="margin-top:60px">

			<van-cell-group>
				<van-cell title="守护ID" value="768865" />
			</van-cell-group>

			<van-cell-group>
				<van-cell title="分享链接" value="点击复制" @click="shareUrlFunc"/>
			</van-cell-group>

			<van-cell-group>
				<van-cell title="邀请粉丝" value="点击复制" @click="shareApplyFunc"/>
			</van-cell-group>
		</div>
		
	</div>
</template>

<script>
import storages from "@/utils/storage.js";

	export default {
		data() {
			return {
			};
		},
		components: {
		},
		methods: {
			// 返回某一页
			jumpRouter(uri,querys) {
				
				this.$router.push({path: uri,query:querys})
			},
			// 返回上一页
			onClickLeft(){
				this.$router.go(-1)
			},
			shareUrlFunc() {
				let _this = this;
				let shareUrl = 'https://lingyouhui.vip/?p=';
				this.$copyText(shareUrl).then(function (e) {
					_this.$toast('复制成功');
				}, function (e) {
					_this.$toast('复制失败！');
				})
			},
			shareApplyFunc() {
				let _this = this;
				let shareUrl = 'https://lingyouhui.vip/apply?p=';
				this.$copyText(shareUrl).then(function (e) {
					_this.$toast('复制成功');
				}, function (e) {
					_this.$toast('复制失败！');
				})
			},
			
		
		
		
		},
		mounted() {
			let tokens = storages.getItem("token", {
					type: "local"
				});

				console.log(tokens)
				if (tokens != 'nb6688') {
					this.jumpRouter('/login')
				}

		},
		computed: {
			
		}
	};
</script>
<style scoped lang="scss">
	.tableBox{
		width: 100%;
		.tableBox_linear{
			width: 100%;
			height: 480px;
			background: #ff766c;
			position: relative;
			.linear-bg{
				width: 100%;
				position: absolute;
				bottom:-4%;
				img{
					width: 100%;
				}
			}
			.linear-order-list{
				width:93%;
				background: #fff;
				height: 200px;
				border-radius: 13px;
				left: 3.5%;
				bottom:-16%;
				margin: auto;
				position: absolute;
				-moz-box-shadow: 1px 5px 7px #e0dfdf; 
				box-shadow: 1px 8px 9px #e0dfdf;
				ul{
					width: 80%;
					margin:40px auto 0;
					display: flex;
    				justify-content: space-between;
					li{
						width: 33.3%;
						text-align: center;
						line-height: 60px;
						span{
							display: block;
							width: 100%;
							font-size:40px;
							color:#d63f34;
						}
						p{
							font-size:27px;
							color: #b0bec5;
						}
					}
				}
			}
			.linear-title{
				width: 90%;
				margin: auto;
				height: 100px;
				line-height: 95px;
				text-align: center;
				color: #fff;
				font-size:42px;
				font-weight: bold;
				position: relative;
				.linear-setter{
					width: 50px;
					position: absolute;
					left: 0;
					top:12px;
					img{
						width: 100%;
					}
				}
				.linear-mailbox{
					position: absolute;
					right: 0;
					top:12px;
					img{
						width: 50px;
					}
				}
			}
			.linear-info{
				width: 90%;
				margin:5% auto 0;
				height:200px;
				display: flex;
    			justify-content: space-between;
				.linear-info-header-img{
					width: 18%;
					img{
						width: 100%;
						border:1px solid #fff;
						border-radius: 50%;
					}
				}
				.linear-info-header-main{
					width: 78%;
					color:#fff;
					padding-top:30px;
					.name{
						font-weight: bold;
						font-size:38px;
						display: flex;
    					justify-content: space-between;
					}
					.number-box{
						display: flex;
    					justify-content: space-between;
						font-size:27px;
						margin-top:15px;
						.number{
							span{
								display: inline-block;
								padding:5px 12px;
								background: hsla(0,0%,100%,.4);
								border-radius: 7px;
							}
						}
					}
					
				}
			}
		}
		
		
	}
</style>
